<template>
    <main-wrap class="landmarmbox" ref="mianEle" :loading="true" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0" :type="1">
        <div class="kkk">
            <div class="topImgBox" v-if="detail.arLandmarkId">
                <Back class="dtBack" :type="1"/>
                <!-- <my-siwper :imgs="[]" /> -->
                <img :src="detail.headImageUrl"/>
                <!-- <i class="fabulous">1 / 1</i> -->
            </div>
            <div class="artlistIntroduce dtrebg">
                <h3 class="title">{{detailType==1?detail.name:detail.arArtistName}}</h3>
                <div class="introduce">
                    {{detail.subtitle}}
                </div>
                <!-- <router-link class="address" :to="`/map?lat=${detail.locationLatitude}&lng=${detail.locationLongitude}&name=${detailType==1?detail.name:detail.arArtistName}`">  -->
                <a class="address" :href="`http://api.map.baidu.com/marker?location=${detail.locationLatitude},${detail.locationLongitude}&title=${detailType==1?detail.name:detail.arArtistName}&content=&output=html&src=webapp.baidu.openAPIdemo`"> 
                
                    <i class="iconfont icon-ditu-dibiao"></i>
                    {{detail.provinceName}}，{{detail.locationAddress}} 
                    | 距离 {{detail.distance}}公里 
                    <van-icon name="arrow" />
                </a>
                
            </div>
        </div>
        <!-- <div class="allWorksWrap dtrebg">
            <div class="tabwrap">
                <my-tab v-model="active" :lists='[{title:"拍卖",name:0},{title:"寄售",name:1}]' :space="true" @change="getData"/>
            </div>
            <div class="tabCon">
                <List :lists="page.lists"/>
                <empty v-if="page.finished && page.lists.length<1"/>
            </div>
        </div> -->
        <div class="dtListBox">
            <item-list title="地标所有孪生广告位（0）" :lists="[]"/>
            <item-list title="地标所有孪生店铺（0）" :lists="[]"/>
            <item-list :lists="page.lists" :title="`地标内的所有商品（${total}）`" :open="true"/>
        </div>
    </main-wrap>
    <div class="arBtn" @click="goAppAr">
        <!-- <i class="iconfont icon-xiangji1fill"></i> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {Icon as vanIcon} from 'vant'
import mainWrap from '@/components/mainWrap.vue'
import Image from '@/components/image.vue'
import myButton from '@/components/myButton.vue';
import Title from '@/components/title.vue'
import myTab from '@/components/myTab.vue'
import List from '@/components/list.vue'
import mySiwper from '@/components/mySiwper.vue'
import Back from '@/components/back.vue'
import empty from '@/components/empty.vue'
import itemList from './components/itemList.vue'
import {H5CallAPPFuction} from '@/utils/common'
export default {
    components:{
       mainWrap,
       Image,
       myButton,
       Title,
       myTab,
       List,
       vanIcon,
       mySiwper,
       Back,
       empty,
       itemList
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            active:0,
            detail:{},
            detailType:1,  // 详情类型：1为AR地标详情（默认为1），2为艺术遇见ar详情
            page:{
                lists:[],
                pageIndex:1,
                pageSize:10,
                finished: false
            },
            distance:'',
            st:'',
            currentPosition:computed(()=>store.state.arApi.currentPosition),
            total:0
        })
        onMounted(()=>{
            state.detailType = route.query.type || 1  // 默认为AR地标详情
            if(state.detailType==1){ 
                getArlandmarkDetail()//AR地标详情
            }else{
                getMeetArDetail() // 艺术遇见ar详情
            }
            onLoad()
        })
        const getArlandmarkDetail = ()=>{ 
            store.dispatch("arApi/get_arlandmark_detail", {
                arLandmarkId: route.params.id,
                latitude: state.currentPosition.lat || route.query.lat,
                longitude: state.currentPosition.lng || route.query.lng
            }).then(res =>{
                state.detail = res.data
            })
        }
        const getMeetArDetail = ()=>{
            store.dispatch("arApi/get_meet_ar_detail", {
                arArtistId: route.params.id,
                latitude: route.query.lat,
                longitude: route.query.lng
            }).then(res =>{
                state.detail = res.data
            })
        }

        const onLoad = ()=> {
            state.st && clearTimeout(state.st)
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st = setTimeout(async () => {
                    let url = 'arApi/get_collection_list'  // 藏品
                    // if(state.active == 1){
                    //     url = 'arApi/ar_collection_list'// 寄售作品
                    // }
                    const res = await store.dispatch(url, {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        keyWord: state.keyword,
                        goodsCategoryId:'',
                        orderField: 1,
                        orderType: "desc" 
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.total = res.total
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const getData = async ()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        const goAppAr = ()=>{  // 调用app方法
            try {
                H5CallAPPFuction('showArView')  // 调用app的方法
            } catch (error) {
                alert('请在app中打开')
            }
        }

        return{
            ...toRefs(state),
            onLoad,
            getData,
            goAppAr,
            //onMapLoaded
        }
    }
}
</script>

<style lang="scss" scoped>
    .topImgBox{
        width: 100%;
        position: relative;
        z-index: 10;
        &::before{
            content: '';
            display: block;
            position: absolute;
            z-index: 8;
            width: 100%;
            left: 0;
            top: 0;
            height: 240px;
            background: url('/images/dttop.png') left top no-repeat;
            background-size:100% 100% ;
        }
        img{
            display: block;
            width: 100%;
        }
        .back{
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 10;
            left: 15px;
            top: 20px;
            width: 36px;
            height: 36px;
            border-radius:50% ;
            img{
                display: block;
                width: 100%;
                height: 100%;
                &:hover{
                    opacity: 0.5;
                }
            }
        }
        .fabulous{
            position: absolute;
            right: 40px;
            bottom: 44px;
            z-index: 10;
            height: 64px;
            line-height: 64px;
            padding: 0 28px;
            background: rgba(214, 53, 53, 0.8);
            border-radius: 32px;
            color: #fff;
            font-size: 32px;
            font-weight: 500;
            font-style: normal;
        }
    }
    .artlistIntroduce{
        padding: 0 40px;
        text-align: left;
        .title{
            font-size: 38px;
            font-weight: 400;
            padding: 46px 0 0 0;
            font-weight: normal;
            color: var(--baseColor);
            line-height: normal;
            line-height: 56px;
        }
        .address{
            display: inline-flex;
            height: 48px;
            background: var(--listBgColor);
            border-radius: 24px;
            align-items: center; 
            padding: 0 20px;
            font-size: 24px;
            transform:scale(0.95);
            -webkit-transform:scale(0.95);
            transform-origin:center left;
            -webkit-transform-origin: center left;
            i{
                font-size: 26px;
                padding: 0 2px 0 0 ;
            }
        }
        .introduce{
            font-size: 28px;
            line-height: 46px;
            padding: 30px 0;
        }
        .atNumber{
            display: flex;
            height: 160px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            .item{
                flex: 1;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                &+.item{
                    border-left: 1px solid rgba(255, 255, 255, 0.3);
                }
                h3{
                    font-size: 50px;
                    font-weight: 400;
                }
                p{
                    font-size: 28px;
                    color: #809191;
                }
            }
        }
        .tabIntroduce{
            display: flex;
            height: 120px;
            margin: 0;
            text-align: center;
            line-height: normal; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            .item{
                flex: 1;
                &+.item{
                    border-left:1px solid rgba(255, 255, 255, 0.3);
                }
                h5{
                    font-size: 26px;
                    font-weight: 500;
                    padding: 6px 0 0 0;
                    transform: scale(0.9);
                    -webkit-transform: scale(0.9);
                }
                p{
                    font-size: 24px;
                    height: 30px;
                    line-height: 30px;
                    color: var(--baseColor);
                    margin: 20px 0 0 0;
                    // transform: scale(0.9);
                    // -webkit-transform: scale(0.9);
                }
            }
        }
        
    }
    .allWorksWrap{
        padding: 40px;
        padding-top:0 ;
        .tabwrap{
            padding: 38px 0 0 0;
        }
    }
    .htitlebox{
        padding: 40px 40px 0 40px;
    }
    .arBtn{
        position: fixed;
        display: flex;
        z-index: 200;
        width: 150px;
        height: 150px;
        left: 50%;
        bottom: 20px;
        margin: 0 0 0 -75px;
        background: url('/images/ph.png') center center no-repeat;
        background-size:100% 100%;
        // background: linear-gradient(248deg, #F0DDC8 0%, #F4C28B 63%, #C98343 100%);
        // box-shadow: 0px 2px 12px 0px rgba(10,75,75,1), inset -8px 4px 10px 0px rgba(255,255,255,0.5);
        // opacity: 1;
        // border-radius:50%;
        // align-items: center;
        // justify-content: center;
        // i{
        //     font-size: 70px;
        // }

    }
    .zwfbox{
        height: 180px;
    }
    .dtListBox{
        position: relative;
        z-index: 11;
        padding: 50px 40px 0 40px;
        background: #022424;
    }
    
    
</style>
<style lang="scss">
.landmarmbox .btmsg{
        margin-bottom: 180px;
    }
</style>